import { ScrollView, StyleSheet, Text, View } from "react-native";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

const ICON_WIDTH = 50;

const styles = StyleSheet.create({
  topList: {
    display: 'flex',
    flexDirection: 'row',
    marginLeft: 16,
    marginRight: 0,
    marginTop: 16,
    gap: 16,
  },
  topListItem: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
  topListItemIcon: {
    width: ICON_WIDTH,
    height: ICON_WIDTH,
    backgroundColor: 'powderblue',
    borderRadius: ICON_WIDTH / 2,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  topListItemText: {
    marginTop: 6,
    fontSize: 12,
  }
});

function TopListItem() {
  return (
    <View style={styles.topListItem}>
      <View style={styles.topListItemIcon}>
        <Icon name="home" size={30} color="#900" />
      </View>
      <Text style={styles.topListItemText}>签到福利</Text>
    </View>
  );
}

export default function TopList() {
  return (
    <ScrollView horizontal={true} style={styles.topList} showsHorizontalScrollIndicator={false}>
      <TopListItem />
      <TopListItem />
      <TopListItem />
      <TopListItem />
      <TopListItem />
      <TopListItem />
      <TopListItem />
      <TopListItem />
      <TopListItem />
    </ScrollView>
  );
}
